{{ define "admin/test/index.html" }}
{{ template "layouts/header.html" }}
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">综合演示</div>
                <div class="layui-card-body">
                    <fieldset id="searchFieldset_currentTable" class="table-search-fieldset">
                        <legend>条件搜索</legend>
                        <form class="layui-form toolbar">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">用户姓名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="realname" placeholder="请输入用户姓名" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label  w-auto">搜索选择框</label>
                                    <div class="layui-input-inline">
                                        <select name="modules" lay-verify="required" lay-search="">
                                            <option value="">请选择</option>
                                            <option value="1">layer</option>
                                            <option value="2">form</option>
                                            <option value="3">layim</option>
                                            <option value="4">element</option>
                                            <option value="5">laytpl</option>
                                            <option value="6">upload</option>
                                            <option value="7">laydate</option>
                                            <option value="8">laypage</option>
                                            <option value="9">flow</option>
                                            <option value="10">util</option>
                                            <option value="11">code</option>
                                            <option value="12">tree</option>
                                            <option value="13">layedit</option>
                                            <option value="14">nav</option>
                                            <option value="15">tab</option>
                                            <option value="16">table</option>
                                            <option value="17">select</option>
                                            <option value="18">checkbox</option>
                                            <option value="19">switch</option>
                                            <option value="20">radio</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline" style="width: auto;">
                                        <button type="submit" class="layui-btn layui-btn-normal" lay-filter="search" lay-submit>
                                            <i class="layui-icon layui-icon-search"></i><span>查询</span>
                                        </button>
                                        <button type="reset" class="layui-btn layui-btn-primary">
                                            <i class="layui-icon layui-icon-delete"></i><span>重置</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </fieldset>
                    <div class="layui-form">
                        <table class="layui-hide" id="test-table-index" lay-filter="test-table-index"></table>
                    </div>
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                            <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
                            <button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
                            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="multi-row">
                                多行
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="default-row">
                                单行
                            </button>
                        </div>
                    </script>

                    <script type="text/html" id="cityTpl">
                        <select id="demoCity1" class="layui-border" lay-ignore>
                            <option value="浙江杭州">浙江杭州</option>
                            <option value="江西南昌">江西南昌</option>
                            <option value="湖北武汉">湖北武汉</option>
                        </select>
                    </script>

                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['index', 'table'], function () {
        var table = layui.table;

        // 创建渲染实例
        table.render({
            elem: '#test-table-index'
            , url: ''
            , toolbar: '#toolbarDemo'
            , defaultToolbar: ['filter', 'exports', 'print', {
                title: '帮助'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , height: 'full-100' // 最大高度减去其他容器已占有的高度差
            , cellMinWidth: 80
            , totalRow: true // 开启合计行
            , page: true
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true, totalRowText: '合计：'}
                , {field: 'username', width: 80, title: '用户'}
                , {
                    field: 'email',
                    title: '邮箱 <i class="layui-icon layui-icon-email"></i>',
                    hide: 0,
                    width: 150,
                    edit: 'text'
                }
                , {field: 'sex', width: 80, title: '性别', sort: true}
                , {
                    field: 'city',
                    width: 115,
                    title: '城市',
                    minWidth: 115,
                    templet: '#cityTpl',
                    exportTemplet: function (d, obj) {
                        //console.log(obj)
                        // 处理该字段的导出数据
                        var td = obj.td(this.field); //获取当前 td
                        return td.find('select').val();
                    }
                }
                , {field: 'sign', title: '签名', edit: 'textarea', minWidth: 260}
                , {field: 'experience', width: 100, title: '积分', sort: true, totalRow: '😊'}
                , {field: 'checkin', title: '打卡', width: 100, sort: true, totalRow: '1次'}
                , {field: 'ip', title: 'IP', width: 120}
                , {field: 'joinTime', title: '加入时间', width: 120}
                , {fixed: 'right', title: '操作', width: 125, minWidth: 125, toolbar: '#barDemo'}
            ]]
            , done: function () {
                var id = this.id;
            }
            , error: function (res, msg) {
                console.log(res, msg)
            }
        });

        // 工具栏事件
        table.on('toolbar(test-table-index)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(layui.util.escape(JSON.stringify(data)));
                    break;
                case 'getData':
                    var getData = table.getData(id);
                    console.log(getData);
                    layer.alert(layui.util.escape(JSON.stringify(getData)));
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选')
                    break;
                case 'multi-row':
                    table.reload('test-table-index', {
                        // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                        lineStyle: 'height: 95px;'
                    });
                    layer.msg('即通过设置 lineStyle 参数可开启多行');
                    break;
                case 'default-row':
                    table.reload('test-table-index', {
                        lineStyle: null // 恢复单行
                    });
                    layer.msg('已设为单行');
                    break;
                case 'LAYTABLE_TIPS':
                    layer.alert('Table for layui-v' + layui.v);
                    break;
            }
            ;
        });

        //触发单元格工具事件
        table.on('tool(test-table-index)', function (obj) { // 双击 toolDouble
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    title: '编辑',
                    type: 1,
                    area: ['80%', '80%'],
                    content: '<div style="padding: 16px;">自定义表单元素</div>'
                });
            }
        });

        //触发表格复选框选择
        table.on('checkbox(test-table-index)', function (obj) {
            console.log(obj)
        });

        //触发表格单选框选择
        table.on('radio(test-table-index)', function (obj) {
            console.log(obj)
        });

        // 行单击事件
        table.on('row(test-table-index)', function (obj) {
            //console.log(obj);
            //layer.closeAll('tips');
        });
        // 行双击事件
        table.on('rowDouble(test-table-index)', function (obj) {
            console.log(obj);
        });

        // 单元格编辑事件
        table.on('edit(test-table-index)', function (obj) {
            var field = obj.field //得到字段
                , value = obj.value //得到修改后的值
                , data = obj.data; //得到所在行所有键值

            var update = {};
            update[field] = value;
            obj.update(update);
        });
    });
</script>
</body>
{{ template "layouts/footer.html" }}
{{ end }}